html{
    height: 100%;
    font-size: 10px;
    /* fz10 */
    background: url('./background.jpg') bottom center no-repeat;
    background-size: cover;
}

.keys {
    display: flex; /* 使用 Flexbox 布局 */
    flex: 1; /* 让元素占据剩余空间 */
    height: 100vh;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.key {
    border: 4px solid black; /* 边框 */
    border-radius: 5px;  /* 圆角 */
    margin: 10px;  /* 外边距 */
    font-size: 15px;  /* 字体大小 */
    padding: 10px 5px;  /* 内边距 */
    width: 100px;  /* 宽度 */
    color: white;  /* 字体颜色 */
    background: rgba(0, 0, 0, .4); /* 背景颜色 */
    box-shadow: 0 0 5px black;  /* 阴影 */
    text-align: center;  /* 文本居中 */
}

.key>div {
    font-size: 40px;  /* 字体大小 */
}

.key .sound {
    font-size: 12px;  /* 字体大小 */
    text-transform: uppercase;  /* 大写 */
    letter-spacing: 1px;  /* 字母间距 */ 
    color: #ffc600;  /* 字体颜色 */
}